<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
  <button id='zoom'>Zoom to buildings</button>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"
import MapboxCommonService from "@/service/map/MapboxCommonService"

export default {
  name: "ChangeBuildStyle.component",
  components: {Mapbox},
  setup() {

    let mapStore = ref({});
    let mapOnLoadCB = (map) => {
      mapStore.value = map;
      MapboxCommonService.setCZBP(map, [-90.73414, 14.55524], 13)

      // 使用interpolate expression 缓入建筑图层并平滑地完成颜色变换。
      map.setPaintProperty('building', 'fill-color', [
        "interpolate",
        ["exponential", 0.5],
        ["zoom"],
        15,
        "#e2714b",
        22,
        "#eee695"
      ]);
      map.setPaintProperty('building', 'fill-opacity', [
        "interpolate",
        ["exponential", 0.5],
        ["zoom"],
        15,
        0,
        22,
        1
      ]);

      document.getElementById('zoom').addEventListener('click', () => {
        map.zoomTo(19, {duration: 9000});
      });
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped lang="scss">
#zoom {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 20%;
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background: #ee8a65;
  cursor: pointer;
}
</style>